<template>
  <div>
    <van-popup
        v-model:show="show"
        position="right"
        :style="{ width: '340px',height:'100%',backgroundColor:'#282828',padding:'0 0.6rem' }"
        @open="userWallet"
    >
<!--      @open="showToast('open')"-->
<!--      @opened="showToast('opened')"-->
<!--      @close="showToast('close')"-->
<!--      @closed="showToast('closed')"-->
      <div  v-if="$token" class="snake_ball_tit_prop" style="justify-content: flex-start;margin-bottom: 0;margin-top: 24px">
        <svg-icon style="width: 1.2rem;height:1.2rem;" name="logo"  />
        <div style="margin-left: 4px;letter-spacing: 1px;">古德温救我 <span style="margin: 0 -4px">-</span>  把足球当理财</div>

      </div>
      <div  v-if="!$token" class="snake_ball_tit_prop" style="justify-content: flex-start;margin-top: 48px;margin-bottom: 0" >
        <svg-icon style="width: 1.2rem;height:1.2rem; " name="logo" />
        <div style="margin-left: 4px;letter-spacing: 1px;">古德温救我 <span style="margin: 0 -4px">-</span>  把足球当理财</div>
      </div>
      <div class="login_bas_login" v-if="$token" style="padding-left: 2px">
<!--        <svg-icon v-if="!$token" style="width: 40px;height:40px;" name="noLogin" />-->
        <svg-icon v-if="$token" style="width: 40px;height:40px;" name="login" />
<!--        <div v-if="!$token" style="margin-left: 8px;font-size: 15px">请登录</div>-->
        <div v-if="$token" style="margin-left: 4px;font-size: 15px">{{userLI.name}}</div>
      </div>
      <div v-if="!$token" class="login_bas_login_but" @click="toLogin">登录{{$token}}</div>
<!--      <div v-if="!$token" class="login_bas_login_but" @click="toRegister" style="margin-top: 10px">注册</div>-->
      <div v-if="$token" class="login-box">
        <div style="padding: 0 6px">
          <div class="login-box-logo" @click="toRecharge" style="display:flex;justify-content: space-between;align-items: center;">
            <div class="login-box-logo_count">
              <div class="login-box-logo_jin">金币余额</div>
              <div class="login-box-logo_ye">{{wallet}}</div>
            </div>
            <div style="width: 60px;height: 24px;line-height: 24px;font-size: 14px;background-color: #fff;border-radius: 14px;color: #1A674e;text-align: center;margin-right: 20px;font-weight: bold;">充值</div>
          </div>

        </div>
        <div class="login-box_li" @click="toPurchaseMembership">
          <svg-icon style="width: 30px;height:30px;" name="vip_logo" />
          <div style="margin-left: 4px">会员中心</div>
        </div>
        <van-divider style="background-color: #4b4b4b" />

        <div class="login-box_li" @click="toFeedback">
          <svg-icon style="width: 30px;height:30px;" name="kfFk" />
          <div style="margin-left: 4px">客服反馈</div>
        </div>
        <van-divider style="background-color: #4b4b4b" />
        <div class="login-box_li" @click="removeLogin">
          <svg-icon style="width: 30px;height:30px;" name="exit" />
          <div style="margin-left: 4px">退出登录</div>
        </div>


      </div>

    </van-popup>
    <van-nav-bar class="snake_ball_tit" title="古德温救我" left-text="返回" left-arrow>
      <template #right>
        <span v-if="$token">
          <svg-icon v-if="!isStringInArray(router.currentRoute.value.path,['/login','/register'])" style="width: 26px;height: 26px" name="login" @click="show = true" />
        </span>
        <span v-if="!$token">
         <svg-icon v-if="!isStringInArray(router.currentRoute.value.path,['/login','/register'])" style="width: 26px;height: 26px" name="noLogin" @click="show = true" />
        </span>

      </template>
      <template #left>
        <van-icon v-if="!isStringInArray(router.currentRoute.value.path,['/index'])" name="arrow-left" style="color: #fff;font-size: 20px;font-weight: bold"  @click="goBack" />
<!--        <van-icon  style="width: 26px;height: 26px" name="arrow-left" @click="" />-->
      </template>
      <template #title>
        <div @click="toIndex" style="display: flex;justify-content: center;align-items: center;">
          <svg-icon style="width: 26px;height: 26px" name="logo"  />
          <div style="height: 26px;line-height: 28px;vertical-align: middle;margin-left: 4px">
            古德温救我
          </div>


        </div>

      </template>
  </van-nav-bar>
  </div>
</template>

<script setup lang="ts">
  import {storage} from "@/utils/unit"
  import { ref } from 'vue';
  import { showToast } from 'vant';
  import {isStringInArray} from '@/utils/public'
  import {useRouter} from "vue-router";
  import { ComponentInternalInstance, getCurrentInstance } from 'vue';
  import {showFailToast, showSuccessToast} from "vant";
  import {UserLogin, UserWallet} from "@/api/mock";
  const wallet = ref(0)
  // UserWallet
  const userLI = ref({})
  const goBack = ()=>{
    history.go(-1)
  }
  // let token = localStorage.getItem("token");
  const userWallet = ()=>{

    let pa = {
      user_id:localStorage.getItem("token")
    }
    if(!pa.user_id){
      return
    }
    console.log(pa)
    UserWallet(pa).then(
        (res) => {
          if (+res.code === 200){
            userLI.value = res.data
            wallet.value = res.data.wallet
            proxy.$sayIs_vip(res.data.is_vip)


            // toLogin()
          }else{
            showFailToast(res.msg);

          }

        },
        err => {
          console.log(err);
          // showFailToast("请求有误");
        }
    );
  }
  const token =ref(localStorage.getItem("token")) ;
  const { proxy } =  getCurrentInstance() as ComponentInternalInstance
  const openLogin = ()=>{}
  const removeLogin = ()=>{
    proxy.$sayToken('')
    proxy.$sayIs_vip('')
    proxy.$sayIs_yx('','','')
    storage.set('sToken','')
    token.value = localStorage.getItem("token")
    localStorage.setItem("token",'')
    show.value = false
    showSuccessToast('退出登录成功')

    router.push({
      path: "/index",
      query: {
        mode: "",
      },
    });
    if(isStringInArray(router.currentRoute.value.path,['/index'])){
      location.reload()
    }

    // proxy.$token=''

  }
  const show = ref(false);
  const router = useRouter()
  const toLogin = ()=>{
    show.value = false
    router.push({
      path: "/login",
      query: {
        mode: "",
      },
    });
    // setTimeout(()=>{
      // location.reload()

    // },800)
  }
  const toRegister = ()=>{
    show.value = false
    router.push({
      path: "/register",
      query: {
        mode: "",
      },
    });
  }
  const toFeedback = ()=>{
    show.value = false
    router.push({
      path: "/feedback",
      query: {
        mode: "",
      },
    });
  }
  const toPurchaseMembership = ()=>{
    show.value = false
    router.push({
      path: "/purchaseMembership",
      query: {
        mode: "",
      },
    });
  }
  const toRecharge = ()=>{
    show.value = false
    router.push({
      path: "/recharge",
      query: {
        mode: "",
      },
    });
  }
  const toIndex = ()=>{
    show.value = false
    router.push({
      path: "/index",
      query: {
        mode: "",
      },
    });
  }

  // const showToast = showToast
  // const openProp = ()=>{
  //   show.value = true
  // }
</script>

<style scoped lang="less">
::v-deep .van-divider::before{
  background-color: #4b4b4b;
  border-color: #4b4b4b;
}
.login-box{
  ::v-deep .van-divider{
    margin: 10px 0 0 0;
  }
  width: 100%;
  background-color: #373737;
  padding: 6px 0px  10px 0px;
  border-radius: 4px;
  margin-top: 10px;
  .login-box-logo_count{
    display: flex;
    flex-direction:column;
    justify-content: center;
    //align-items: left;
    flex-wrap: wrap;
    margin: auto 0;
  }
  .login-box-logo{
    display: flex;
    width: 100%;
    height: 70px;
    padding-left: 14px;
    background-image: url("../../image/image1_0/much.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    color: #fff;
    .login-box-logo_jin{
      width: 100%;
      font-size: 13px;
    }
    .login-box-logo_yeP{
      width: 100%;

      font-size: 16px;
    }
    .login-box-logo_ye{
      margin-top: 0px;
      width: 100%;

      font-size: 19px;
    }
  }
  .login-box_li{
    //background-color: #282828;
    color: #B9B9B9;
    display: flex;
    justify-content: left;
    align-items: center;
    margin: 10px 0 0 0;
    font-weight: bold;
    font-size: 15px;
    line-height: 30px;
    padding: 0 6px;
    //font-siz;
  }
}
.login_bas_login_but{
  background-color: #1A674E;
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  color: #fff;
  margin-top: 36px;
}
.login_bas_login{
  background-color: #282828;
  color: #fff;
  display: flex;
  justify-content: left;
  align-items: center;
  margin: 21px 0 0 0;
  font-weight: bold;
  font-size: 0.78rem;
}

.snake_ball_tit_prop{
  background-color: #282828;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 11px 0;
  font-weight: bold;
  font-size: 1rem;
  >div{
    line-height: 1rem;
  }
}
.snake_ball_tit{
  background-color: #015441;
  ::v-deep .van-nav-bar__title{
    color: #fff;
  }
}
::v-deep .van-hairline--bottom:after{
  display:none;
}
</style>
